<script setup>
import {ref} from "vue";
import {deleteCourseClass, listCourseClass} from "../../../api/course/course.js";
import {CirclePlus} from "@element-plus/icons-vue";
import InsertStudent from "../CourseClassOperation/InsertStudent.vue";
import {ElMessage} from "element-plus";

// 课程id
const courseId = ref('');
// 分班列表
const classTable = ref([]);
courseId.value=localStorage.getItem('courseId');
// 查询分班列表
const handleListClassTable=async ()=>{
  await listCourseClass(courseId.value).then(res=>{
    classTable.value = res.data;
    console.log(classTable.value);
  })
}

// 关闭弹窗函数
const closeDialog = () => {
  isInsertStudent.value = false;
};


// 当前的按钮
const currentButton = ref('');
// 当前悬停的行的索引
const hoveredRowIndex = ref(null);

// 当前选中的班级ID
const selectedClassId = ref(null);

const isInsertStudent = ref(false);
const handleMouseOver = (index,icon) => {
  currentButton.value = icon;
  hoveredRowIndex.value = index;
};

const handleMouseLeave = () => {
  currentButton.value = '';
  hoveredRowIndex.value = null;
};

const handleInsertStudent = (classId) => {
  selectedClassId.value = classId;
  isInsertStudent.value = true;
};

// 删除班级
const handleDeleteClass=async (classId)=>{
  await deleteCourseClass(classId).then(res=>{
    handleListClassTable();
    ElMessage.success("删除班级成功");
  });
}

handleListClassTable();
</script>

<template>
  <el-table :data="classTable" style="height: 100%" :row-style="{height:'70px'}">
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="className" label="分班名称" />
    <el-table-column prop="number" label="学生成员" />
    <el-table-column prop="invite" label="邀请码" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-icon style="width: 100px;"
                 @mouseover="handleMouseOver(scope.$index,'add')"
                 @mouseleave="handleMouseLeave"
                 @click="handleInsertStudent(scope.row.id)"
                 :class="{ 'hovered': hoveredRowIndex === scope.$index && currentButton=== 'add'}">
          <div style="display: flex;align-items: center;">
            <CirclePlus/>
            <span>添加学生</span>
          </div>
        </el-icon>
        <el-icon style="width: 100px;"
                 @mouseover="handleMouseOver(scope.$index,'delete')"
                 @mouseleave="handleMouseLeave"
                 @click="handleDeleteClass(scope.row.id)"
                 :class="{ 'delete': hoveredRowIndex === scope.$index && currentButton==='delete'}">
          <div style="display: flex;align-items: center;">
            <span>删除</span>
          </div>
        </el-icon>
      </template>
    </el-table-column>
  </el-table>
  <InsertStudent v-model="isInsertStudent" :classId="selectedClassId" @close="closeDialog"></InsertStudent>
</template>

<style scoped lang="less">
.hovered {
  color: #41a4f6; /* 悬停时的颜色，可以根据需要调整 */
}
.delete{
  color: #f56c6c;
}
</style>
